<template>
  <view class="main">
    <view class="detailItem2">
      <view class="orderNum"
        ><p>运单编号：{{ dataRes.ORDERID }}</p></view
      >
      <view class="orderTopMain">
        <nut-steps direction="vertical" progress-dot current="2">
          <nut-step title="始发地" :content="dataRes.STR">1</nut-step>
          <nut-step title="目的地" :content="dataRes.DES">2</nut-step>
        </nut-steps>
      </view>
    </view>
    <view class="detailItem2 orderTopMain">
      <nut-steps
        direction="vertical"
        progress-dot
        :current="dataList.length - 1"
      >
        <nut-step v-for="(item,index) in dataList" :key="index" :title="item.BILLINGTIME" :content="item.ORDERSTATUS">{{index}}</nut-step>
        <!-- <nut-step title="2023-01-01 15:30" content="运输中，货物由福州前横路前往广东深圳">2</nut-step>
        <nut-step title="2023-01-01 15:30" content="货物正在【福州前横路】装车">3</nut-step>
        <nut-step title="2023-01-01 15:30" content="货物正在【福州前横路】装车">4</nut-step>
        <nut-step title="2023-01-01 15:30" content="接货完成，货物已承接，正在返回【福州前横路】">5</nut-step> -->
      </nut-steps>
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { $post } from "../../@api/index";
import useMyOrderStore from "../../store/myOrder";
import {type OrderTrackInfo,type TrackInfo} from './types'
const store = useMyOrderStore();
const dataRes = ref<OrderTrackInfo>();
const dataList = ref<TrackInfo[]>();
getOrderTrackInfo();
async function getOrderTrackInfo() {
  dataRes.value = store.trackingList;
  let res = await $post<{data:TrackInfo[]}>("/order/getOrderTrackInfo", {
    orderid: dataRes.value.ORDERID,
  });
  dataList.value = res.data.data;
}
</script>
<style lang="less">
.main {
  width: 100%;
  height: 100%;
  padding: 0 24rpx;
  background: rgb(228, 228, 228);
  box-sizing: border-box;
  padding-top: 1rpx;
  .nut-step-title {
    color: #999999 !important;
    font-size: 24rpx;
    margin-bottom: 0 !important;
  }
  .nut-step-content {
    color: #252525 !important;
    font-size: 28rpx;
    font-weight: 600;
  }
  .nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon {
    background: #0966ff !important;
  }
  .nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon {
    background: #08bf60 !important;
  }
  .nut-step.nut-step-finish .nut-step-line {
    background: #999999 !important;
  }
  .detailItem2 {
    margin-top: 16rpx;
    padding: 0 !important;
    width: 100%;
    border-radius: 16rpx;
    background: white;
    box-sizing: border-box;
  }
  .orderTopMain {
    padding: 24rpx !important;
    box-sizing: border-box;
  }
  .orderNum {
    height: 72rpx;
    background: url("../../assets/images/index/我的订单/yundaizhuizong_img_yundanbianhao.png")
      no-repeat;
    font-size: 24rpx;
    line-height: 72rpx;
    p {
      margin-left: 24rpx;
    }
  }
}
</style>
